<template>
	<div class="cumulative-section">
		<!-- 加载状态 -->
		<div v-if="loading" class="loading-overlay">
			<el-skeleton :rows="1" animated />
		</div>

		<!-- 错误状态 -->
		<div v-else-if="error" class="error-overlay">
			<el-alert title="数据加载失败" type="error" :closable="false" show-icon>
				<template #default>
					<div>统计数据加载失败，请重试</div>
				</template>
				<template #action>
					<el-button type="primary" size="small" @click="handleRetry"> 重试 </el-button>
				</template>
			</el-alert>
		</div>

		<!-- 正常数据显示 -->
		<div v-else-if="statisticsData && statisticsData.cards && statisticsData.cards.length > 0" class="statistics-container">
			<!-- 时间进度条 - 贯穿整个区域 -->
			<div class="time-progress-bar-container">
				<div class="time-progress-header">
					<div class="progress-info">
						<el-icon class="progress-icon"><ele-Timer /></el-icon>
						<span class="progress-title">时间进度</span>
						<!-- 时间进度显示：修改前 {{ statisticsData?.passedDays }}/{{ statisticsData?.totalDays }}天 -->
				<span class="progress-text">{{ getTimeProgressDesc() }}</span>
					</div>
					<!-- 修改前: {{ statisticsData?.timeProgressRate || 0 }}% -->
					<div class="progress-percentage">{{ getTimeProgressRate() }}%</div>
				</div>
				<div class="time-progress-bar">
					<!-- 主进度条 - 使用 Element Plus 条纹进度条 -->
					<div class="progress-bar-wrapper">
						<el-progress :percentage="getTimeProgressRate()" :color="getTimeProgressColor()" :stroke-width="12" :show-text="false" striped striped-flow />
					</div>

					<!-- 开工率旗帜 -->
					<div 
						v-if="getStartRate() > 0"
						class="progress-flag start-flag" 
						:style="{ left: Math.max(2, Math.min(98, getStartRate())) + '%' }"
					>
						<div class="flag-pole"></div>
						<div class="flag-banner">
							<el-icon class="flag-icon"><ele-VideoPlay /></el-icon>
							<span class="flag-text">开工{{ getStartRateText() }}%</span>
						</div>
					</div>

					<!-- 完工率旗帜 -->
					<div 
						v-if="getEndRate() > 0"
						class="progress-flag end-flag" 
						:style="{ left: Math.max(2, Math.min(98, getEndRate())) + '%' }"
					>
						<div class="flag-pole"></div>
						<div class="flag-banner">
							<el-icon class="flag-icon"><ele-CircleCheck /></el-icon>
							<span class="flag-text">完工{{ getEndRateText() }}%</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 统计卡片区域 - 直接使用后端数据，无前端计算 -->
			<el-row :gutter="12" class="statistics-cards">
				<el-col v-for="(card, index) in statisticsData?.cards" :key="card.cardType" :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
					<div class="stat-card" :class="getCardClass(card.cardType)">
						<div class="stat-content">
							<div class="stat-left">
								<div class="stat-icon">
									<el-icon><component :is="getIconComponent(card.iconType)" /></el-icon>
								</div>
								<div class="stat-info">
									<div class="stat-main">
										<div class="stat-number-large">{{ card.actualCount }}</div>
										<div class="stat-divider">/</div>
										<div class="stat-number-large">{{ card.planCount }}</div>
									</div>
									<div class="stat-title">{{ getOptimizedLabel(card) }}</div>
								</div>
							</div>
							<div class="stat-chart">
								<div :data-chart-index="index" class="mini-chart"></div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<!-- 无数据状态 -->
		<div v-else class="empty-data">
			<el-empty description="暂无统计数据" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed } from 'vue';
import * as echarts from 'echarts';

import { StatisticsCardsResponse, CardItem } from '/@/api/plans/planView';

interface Props {
	statisticsData?: StatisticsCardsResponse;
	loading?: boolean;
	error?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
	loading: false,
	error: false,
});

const emit = defineEmits<{
	retry: [];
}>();

// 动态图表引用
const chartInstances = ref<(echarts.ECharts | null)[]>([]);

const handleRetry = () => {
	emit('retry');
};

// ========== 修改前的原始代码 (保留以便后续切换) ==========
// const getTimeProgressDesc = () => {
// 	if (!props.statisticsData) return '时间进度';
// 	if (props.statisticsData.passedDays && props.statisticsData.totalDays) {
// 		return `${props.statisticsData.passedDays}/${props.statisticsData.totalDays}天`;
// 	}
// 	return '时间进度';
// };

// const getTimeProgressRate = () => {
// 	if (!props.statisticsData) return 0;
// 	return props.statisticsData.timeProgressRate || 0;
// };
// ========== 修改前的原始代码结束 ==========

// ========== 修改后的代码 (当前使用) ==========
// 获取时间进度描述
// 因领导要求。需要推迟1天。主要原因是今天区域反馈的内容都是昨天的工作内容
// 但到最后一天时，需要显示正常的总天数/总天数
const getTimeProgressDesc = () => {
	if (!props.statisticsData) return '时间进度';
	if (props.statisticsData.passedDays && props.statisticsData.totalDays) {
		// 如果已经到达或超过最后一天，显示总天数/总天数
		if (props.statisticsData.passedDays >= props.statisticsData.totalDays) {
			return `${props.statisticsData.totalDays}/${props.statisticsData.totalDays}天`;
		}
		// 否则，显示提前1天的进度（但保留至少1天的最小值）
		const displayedDays = Math.max(1, props.statisticsData.passedDays - 1);
		return `${displayedDays}/${props.statisticsData.totalDays}天`;
	}
	return '时间进度';
};

// 获取时间进度百分比（保留一位小数）
// 因领导要求。需要推迟1天。主要原因是今天区域反馈的内容都是昨天的工作内容
// 但到最后一天时，需要显示100%的正常进度
const getTimeProgressRate = () => {
	if (!props.statisticsData) return 0;
	if (props.statisticsData.passedDays && props.statisticsData.totalDays) {
		// 如果已经到达或超过最后一天，显示100%
		if (props.statisticsData.passedDays >= props.statisticsData.totalDays) {
			return 100;
		}
		// 否则，显示提前1天的进度（但保留至少1天的最小值）
		const displayedDays = Math.max(1, props.statisticsData.passedDays - 1);
		const rate = (displayedDays / props.statisticsData.totalDays) * 100;
		return Math.round(rate * 10) / 10;
	}
	return 0;
};
// ========== 修改后的代码结束 ==========

// 获取时间进度条颜色
const getTimeProgressColor = () => {
	if (!props.statisticsData) return 'linear-gradient(90deg, #52c41a, #73d13d)';
	const rate = props.statisticsData.timeProgressRate || 0;
	if (rate < 30) {
		// 30%以下：绿色（安全）
		return 'linear-gradient(90deg, #52c41a, #73d13d)';
	} else if (rate < 60) {
		// 30%-60%：黄色（注意）
		return 'linear-gradient(90deg, #faad14, #ffc53d)';
	} else if (rate < 85) {
		// 60%-85%：橙色（警告）
		return 'linear-gradient(90deg, #fa8c16, #ff9c6e)';
	} else {
		// 85%以上：红色（紧急）
		return 'linear-gradient(90deg, #f5222d, #ff7875)';
	}
};

// 根据卡片类型获取CSS类名
const getCardClass = (cardType: string) => {
	const classMap: Record<string, string> = {
		'ActualStart': 'actual-start-card',
		'ActualEnd': 'actual-end-card', 
		'DelayStart': 'delay-plan-card',
		'DelayEnd': 'delay-actual-card'
	};
	return classMap[cardType] || 'stat-card';
};

// 根据图标类型获取图标组件
const getIconComponent = (iconType: string) => {
	const iconMap: Record<string, string> = {
		'start': 'ele-VideoPlay',
		'end': 'ele-CircleCheck',
		'delay-start': 'ele-Warning',
		'delay-end': 'ele-WarnTriangleFilled'
	};
	return iconMap[iconType] || 'ele-DataAnalysis';
};

// 获取开工率（用于旗帜位置）
const getStartRate = () => {
	if (!props.statisticsData?.cards) return 0;
	const startCard = props.statisticsData.cards.find(card => card.cardType === 'ActualStart');
	return startCard ? startCard.rate : 0;
};

// 获取完工率（用于旗帜位置）
const getEndRate = () => {
	if (!props.statisticsData?.cards) return 0;
	const endCard = props.statisticsData.cards.find(card => card.cardType === 'ActualEnd');
	return endCard ? endCard.rate : 0;
};

// 获取开工率显示文本（保留一位小数）
const getStartRateText = () => {
	const rate = getStartRate();
	return (Math.round(rate * 10) / 10).toFixed(1);
};

// 获取完工率显示文本（保留一位小数）
const getEndRateText = () => {
	const rate = getEndRate();
	return (Math.round(rate * 10) / 10).toFixed(1);
};

// 获取优化后的标签文本
const getOptimizedLabel = (card: CardItem) => {
	const labelMap: Record<string, string> = {
		'ActualStart': '实际开工/计划开工',
		'ActualEnd': '实际完工/计划完工',
		'DelayStart': '开工延期/应开工数',
		'DelayEnd': '完工延期/应完工数'
	};
	return labelMap[card.cardType] || card.title;
};

// 获取分列显示的标签
const getSplitLabel = (card: CardItem) => {
	const labelMap: Record<string, { actual: string; plan: string }> = {
		'ActualStart': { actual: '实际开工', plan: '计划开工' },
		'ActualEnd': { actual: '实际完工', plan: '计划完工' },
		'DelayStart': { actual: '开工延期', plan: '应开工数' },
		'DelayEnd': { actual: '完工延期', plan: '应完工数' }
	};
	return labelMap[card.cardType] || { actual: '实际', plan: '计划' };
};

// 获取评级样式类
const getRateClass = (rate: number) => {
	if (rate >= 90) return 'excellent';
	if (rate >= 70) return 'good';
	if (rate >= 50) return 'fair';
	return 'poor';
};

// 获取图表显示的比率（延期类型需要反向）
const getDisplayRate = (card: CardItem) => {
	// 对于延期类型，显示按时完成率（100% - 延期率）
	if (card.cardType === 'DelayStart' || card.cardType === 'DelayEnd') {
		return Math.max(0, 100 - card.rate);
	}
	// 对于实际类型，直接显示完成率
	return card.rate;
};

// 创建通用图表
const createChart = (containerEl: HTMLElement, rate: number, cardType: string) => {
	if (!containerEl) return null;

	const chart = echarts.init(containerEl);
	
	// 根据卡片类型选择颜色
	const getChartColors = (type: string) => {
		const colorMap: Record<string, { start: string; end: string }> = {
			'ActualStart': { start: '#f093fb', end: '#f5576c' },
			'ActualEnd': { start: '#43e97b', end: '#38f9d7' },
			'DelayStart': { start: '#52c41a', end: '#73d13d' },
			'DelayEnd': { start: '#52c41a', end: '#73d13d' }
		};
		return colorMap[type] || { start: '#52c41a', end: '#73d13d' };
	};

	const colors = getChartColors(cardType);

	chart.setOption({
		series: [
			{
				type: 'gauge',
				radius: '100%',
				min: 0,
				max: 100,
				startAngle: 90,
				endAngle: -270,
				pointer: { show: false },
				progress: {
					show: true,
					overlap: false,
					roundCap: true,
					clip: false,
					itemStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 1,
							y2: 0,
							colorStops: [
								{ offset: 0, color: colors.start },
								{ offset: 1, color: colors.end },
							],
						},
					},
				},
				axisLine: {
					lineStyle: {
						width: 6,
						color: [[1, '#E6EBF8']],
					},
				},
				splitLine: { show: false },
				axisTick: { show: false },
				axisLabel: { show: false },
				detail: {
					show: true,
					offsetCenter: [0, 0],
					valueAnimation: true,
					fontSize: 14,
					fontWeight: 'bold',
					color: colors.end,
					formatter: '{value}%',
				},
				data: [{ value: rate, name: '', title: { show: false } }],
			},
		],
	});

	return chart;
};

// 初始化所有动态图表
const initDynamicCharts = () => {
	nextTick(() => {
		if (!props.statisticsData?.cards) return;
		
		// 清理现有图表
		chartInstances.value.forEach(chart => {
			if (chart) chart.dispose();
		});
		chartInstances.value = [];
		
		// 为每个卡片创建图表
		props.statisticsData.cards.forEach((card, index) => {
			const chartContainer = document.querySelector(`[data-chart-index="${index}"]`) as HTMLElement;
			if (chartContainer) {
				const chart = createChart(chartContainer, card.rate, card.cardType);
				chartInstances.value[index] = chart;
			}
		});
	});
};


// 监听数据变化
watch(
	() => props.statisticsData,
	() => {
		if (!props.loading && !props.error && props.statisticsData?.cards) {
			initDynamicCharts();
		}
	},
	{ deep: true }
);

// 监听加载状态
watch(
	() => props.loading,
	(newVal) => {
		if (!newVal && !props.error && props.statisticsData?.cards) {
			initDynamicCharts();
		}
	}
);

// 组件挂载
onMounted(() => {
	if (!props.loading && !props.error && props.statisticsData?.cards) {
		initDynamicCharts();
	}
});

// 组件销毁
onBeforeUnmount(() => {
	chartInstances.value.forEach(chart => {
		if (chart) {
			chart.dispose();
		}
	});
	chartInstances.value = [];
});

// 暴露resize方法给父组件
const resize = () => {
	nextTick(() => {
		chartInstances.value.forEach(chart => {
			if (chart) chart.resize();
		});
	});
};

defineExpose({
	resize,
});
</script>

<style lang="scss" scoped>
.cumulative-section {
	margin-bottom: 10px;
	position: relative;

	.statistics-container {
		background: var(--el-bg-color);
		border-radius: 4px;
		padding: 16px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.loading-overlay {
		padding: 20px;
		background: var(--el-bg-color);
		border: 1px solid var(--el-border-color-light);
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.error-overlay {
		padding: 20px;
	}

	// 时间进度条样式
	.time-progress-bar-container {
		margin-bottom: 20px;
		padding: 16px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 4px;
		color: white;

		.time-progress-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;

			.progress-info {
				display: flex;
				align-items: center;
				gap: 8px;

				.progress-icon {
					font-size: 20px;
					color: #fff;
				}

				.progress-title {
					font-size: 16px;
					font-weight: 600;
				}

				.progress-text {
					font-size: 14px;
					opacity: 0.9;
					margin-left: 8px;
				}
			}

			.progress-percentage {
				font-size: 24px;
				font-weight: bold;
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
			}
		}

	.time-progress-bar {
		height: 12px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 6px;
		overflow: visible;
		position: relative;
		margin: 20px 0;
		display: flex;
		align-items: center;

		// Element Plus 进度条包装器
		.progress-bar-wrapper {
			flex: 1;
			padding: 0;

			:deep(.el-progress) {
				margin: 0;
			}

			:deep(.el-progress__bar) {
				background-color: transparent;
				position: relative;
			}

			:deep(.el-progress__fill) {
				border-radius: 6px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
				background-size: 40px 100% !important;
				background-image: repeating-linear-gradient(
					45deg,
					transparent,
					transparent 10px,
					rgba(255, 255, 255, 0.15) 10px,
					rgba(255, 255, 255, 0.15) 20px
				) !important;
				animation: stripeAnimation 1.5s linear infinite !important;
			}

			:deep(.el-progress__track) {
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: 6px;
			}
		}

		// 进度旗帜样式
		.progress-flag {
				position: absolute;
				transform: translateX(-50%);
				z-index: 10;
				animation: flagWave 0.8s ease-out;
				
				// 开工旗帜在上方 - 旗帜在进度条上方
				&.start-flag {
					top: -22px; // 整体位置在进度条上方
					
					.flag-pole {
						height: 28px;
						margin-bottom: 0;
					}
					
					.flag-banner {
						position: absolute;
						top: -2px; // 旗帜横幅在旗杆顶部
						left: 2px;
					}
				}
				
				// 完工旗帜在下方 - 旗帜在进度条下方
				&.end-flag {
					bottom: -22px; // 整体位置在进度条下方
					
					.flag-pole {
						height: 28px;
						margin-top: 0;
					}
					
					.flag-banner {
						position: absolute;
						bottom: -2px; // 旗帜横幅在旗杆底部
						left: 2px;
					}
				}

				.flag-pole {
					width: 2px;
					height: 28px;
					background: rgba(255, 255, 255, 0.9);
					border-radius: 1px;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
				}

				.flag-banner {
					padding: 4px 8px;
					border-radius: 4px;
					font-size: 11px;
					font-weight: 600;
					color: white;
					white-space: nowrap;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
					transition: all 0.3s ease;
					cursor: pointer;
					display: flex;
					align-items: center;
					gap: 4px;

					&:hover {
						transform: scale(1.05);
						box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
					}

					.flag-icon {
						font-size: 10px;
						opacity: 0.9;
					}

					.flag-text {
						font-size: 10px;
						line-height: 1;
					}

					// 旗帜三角形效果
					&::after {
						content: '';
						position: absolute;
						right: -4px;
						top: 50%;
						transform: translateY(-50%);
						width: 0;
						height: 0;
						border-top: 6px solid transparent;
						border-bottom: 6px solid transparent;
						border-left: 4px solid currentColor;
					}
				}

				&.start-flag .flag-banner {
					background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

					&::after {
						border-left-color: #f5576c;
					}
				}

				&.end-flag .flag-banner {
					background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

					&::after {
						border-left-color: #38f9d7;
					}
				}
			}
		}
	}

	@keyframes shimmer {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(100%);
		}
	}

	@keyframes stripeAnimation {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 40px 0;
		}
	}

	@keyframes stripesFlow {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(40px);
		}
	}

	@keyframes flagWave {
		0% {
			opacity: 0;
			transform: translateX(-50%) translateY(10px) scale(0.8);
		}
		50% {
			transform: translateX(-50%) translateY(-5px) scale(1.1);
		}
		100% {
			opacity: 1;
			transform: translateX(-50%) translateY(0) scale(1);
		}
	}

	.statistics-cards {
		margin-bottom: 0;
	}

	.stat-card {
		padding: 20px;
		height: 140px;
		background: var(--el-bg-color);
		border: 1px solid var(--el-border-color-lighter);
		border-radius: 4px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		position: relative;
		overflow: hidden;
		margin-bottom: 16px;
		backdrop-filter: blur(10px);
		
		// 添加微妙的内阴影
		&::after {
			content: '';
			position: absolute;
			inset: 1px;
			border-radius: 3px;
			background: linear-gradient(145deg, 
				rgba(255, 255, 255, 0.8) 0%, 
				rgba(255, 255, 255, 0.1) 50%, 
				rgba(255, 255, 255, 0.8) 100%);
			pointer-events: none;
			opacity: 0.3;
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 3px;
			background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-success));
			z-index: 1;
		}

		&:hover {
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
			transform: translateY(-3px) scale(1.02);
			border-color: var(--el-border-color);
			
			&::after {
				opacity: 0.5;
			}
			
			.stat-chart {
				transform: scale(1.05);
			}
		}

		.stat-content {
			display: flex;
			height: 100%;
			gap: 10px;

			.stat-left {
				display: flex;
				align-items: center;
				gap: 12px;
				flex: 1;
				min-width: 0; // 防止flex溢出

				.stat-icon {
					width: 60px;
					height: 60px;
					border-radius: 18px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28px;
					color: white;
					flex-shrink: 0;
					box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
					transition: all 0.3s ease;
					position: relative;
					overflow: hidden;
					
					// 添加光泽效果
					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: -100%;
						width: 100%;
						height: 100%;
						background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
						transition: left 0.6s ease;
					}
					
					&:hover::before {
						left: 100%;
					}
				}

				.stat-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					min-width: 0;
					gap: 6px;

					.stat-main {
						display: flex;
						align-items: baseline;
						gap: 4px;
						width: 100%;
						max-width: calc(100% - 10px);

						.stat-number-large {
							font-size: 26px;
							font-weight: 800;
							color: var(--el-text-color-primary);
							line-height: 1;
							letter-spacing: -0.5px;
							white-space: nowrap;
							font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
							text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
						}

						.stat-divider {
							font-size: 18px;
							font-weight: 300;
							color: var(--el-text-color-secondary);
							line-height: 1;
							margin: 0 1px;
							flex-shrink: 0;
						}
					}

					.stat-title {
						font-size: 14px;
						color: var(--el-text-color-secondary);
						font-weight: 500;
						line-height: 1.3;
						margin: 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 100%;
						letter-spacing: 0.2px;
						opacity: 0.9;
					}

				}
			}

			.stat-chart {
				width: 90px;
				height: 90px;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: transform 0.3s ease;

				.mini-chart {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 不同卡片的颜色主题
		&.plan-start-card {
			.stat-icon {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			}

			&::before {
				background: linear-gradient(90deg, #667eea, #764ba2);
			}
		}

		&.actual-start-card {
			.stat-icon {
				background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
			}

			&::before {
				background: linear-gradient(90deg, #f093fb, #f5576c);
			}
		}

		&.plan-end-card {
			.stat-icon {
				background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
			}

			&::before {
				background: linear-gradient(90deg, #4facfe, #00f2fe);
			}
		}

		&.actual-end-card {
			.stat-icon {
				background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
			}

			&::before {
				background: linear-gradient(90deg, #43e97b, #38f9d7);
			}
		}

		&.time-progress-card {
			.stat-icon {
				background: linear-gradient(135deg, #fa8c16 0%, #ff9c6e 100%);
			}

			&::before {
				background: linear-gradient(90deg, #faad14, #ffc53d);
			}

			.stat-rate {
				color: #fa8c16 !important;
				background: rgba(250, 140, 22, 0.1) !important;
			}
		}

		&.delay-plan-card {
			.stat-icon {
				background: linear-gradient(135deg, #f5222d 0%, #ff7875 100%);
			}

			&::before {
				background: linear-gradient(90deg, #f5222d, #ff7875);
			}

			.stat-rate {
				color: #f5222d !important;
				background: rgba(245, 34, 45, 0.1) !important;
			}
		}

		&.delay-actual-card {
			.stat-icon {
				background: linear-gradient(135deg, #ff4d4f 0%, #ff7a7a 100%);
			}

			&::before {
				background: linear-gradient(90deg, #ff4d4f, #ff7a7a);
			}

			.stat-rate {
				color: #ff4d4f !important;
				background: rgba(255, 77, 79, 0.1) !important;
			}
		}
	}
}

// 响应式设计
@media (max-width: 1200px) {
	.cumulative-section {
		.stat-card {
			height: 130px;
			padding: 18px;
			
			.stat-content {
				.stat-left {
					.stat-icon {
						width: 55px;
						height: 55px;
						font-size: 24px;
					}
					
					.stat-info {
						.stat-main {
							.stat-number-large {
								font-size: 22px;
							}
						}
					}
				}
				
				.stat-chart {
					width: 75px;
					height: 75px;
				}
			}
		}
	}
}

@media (max-width: 992px) {
	.cumulative-section {
		.stat-card {
			height: 120px;

			.stat-content {
				.stat-left {
					.stat-icon {
						width: 50px;
						height: 50px;
						font-size: 22px;
					}

					.stat-info {
						.stat-number {
							font-size: 28px;
						}
					}
				}

				.stat-chart {
					width: 60px;
					height: 60px;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.cumulative-section {
		padding-top: 15px;
		margin-bottom: 15px;

		// 移动端旗帜调整
		.time-progress-bar {
			margin: 32px 0; // 移动端减少间距
			
			.progress-flag {
				&.start-flag {
					top: -32px;
					
					.flag-pole {
						height: 24px;
					}
				}
				
				&.end-flag {
					bottom: -32px;
					
					.flag-pole {
						height: 24px;
					}
				}

				.flag-banner {
					padding: 3px 6px;
					font-size: 10px;

					.flag-icon {
						font-size: 9px;
					}

					.flag-text {
						font-size: 9px;
					}
				}
			}
		}

		.stat-card {
			padding: 15px;
			height: 110px;
			margin-bottom: 15px;

			.stat-content {
				gap: 12px;

				.stat-left {
					gap: 12px;

					.stat-icon {
						width: 45px;
						height: 45px;
						font-size: 20px;
					}

					.stat-info {
						.stat-number {
							font-size: 24px;
						}

						.stat-label {
							font-size: 13px;
						}

						.stat-rate {
							font-size: 12px;
						}
					}
				}

				.stat-chart {
					width: 50px;
					height: 50px;
				}
			}
		}
	}
}

@media (max-width: 576px) {
	.cumulative-section {
		.stat-card {
			.stat-content {
				flex-direction: column;
				text-align: center;

				.stat-left {
					justify-content: center;
				}

				.stat-chart {
					align-self: center;
				}
			}
		}
	}
}
</style>
